<template>
    <div>
        <div id="header" @click="edit()">
            <div id="header_content">
                <div id="header_img">
                    <img :src="'http://drcy.wyx.ac.cn/'+userInfo.heade_img" alt="">
                </div>
                <span v-if="userInfo!=undefined">{{userInfo.name}}</span>
            </div>
            <div class="go">
                <img src="./../../static/img/router.png" alt="">
            </div>
        </div>
        <div class="list_content">
            <ul>
                <li class="list"><span class="img"><img src="./../../static/img/message.png" alt=""></span><span class="text_me">我的消息</span></li>
                <li class="list"><span class="img"><img src="./../../static/img/direct.png" alt=""></span><span class="text_me">我的私信</span></li>
                <li class="list"><span class="img"><img src="./../../static/img/statistical.png" alt=""></span><span class="text_me">我的统计</span></li>
            </ul>
        </div> 
        <foter></foter>
    </div>
</template>
<style scoped>
    p{
        margin: 0;
        color:#fff;
    }
    #header{
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background:url('./../../static/img/me_header.jpg') center center no-repeat;
        padding: .5em;
    }
    #header_content{
        display: flex;
        align-items: center;
        color:#fff;
    }
    #header_img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: .5em;
        overflow: hidden;
    }
    #header_img>img{
        width: 100%;
    }
    .go{
        width: 20px;
        height: 20px;
    }
    .go>img{
        width: 100%;
    }
    .list_content{
        width: 100%;
        background: #fefefe;
    }
    .list{
        display: flex;
        align-items: center;
        padding-left: .5em;
    }
    .list>.img{
        display: inline-block;
        width: 30px;
        height: 30px;
    }
    .list>.img>img{
        width: 100%;
    }
    .list>.text_me{
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid #ece6e6;
        padding: .5em;
    }
</style>
<script>
import axios from 'axios'
import foter from '@/components/footer.vue'
import Cookies from 'js-cookie'
export default {
    data(){
        return {
            userName:"",
            password:"",
            userInfo:{}
        }
    },
    created(){
        this.getCookie();
        this.getUserInfo();
    },
    components:{
        foter
    },
    methods:{
        getCookie(){
            if(Cookies.get('userName')){
                this.userName=Cookies.get('userName')
                this.password=Cookies.get('password')
            }else{
                this.$router.push('/login')
            }
            
        },
        getUserInfo(){
            axios.post('http://localhost:3000/userInfo',{
                userName:this.userName
            }).then(res=>{
                const response=res.data;
                console.log(response)
                this.userInfo=response.result
            })
        },
        edit(){
            this.$router.push({name:'me_data'})
        }
    }
   
}
</script>
